<!--
 * @Description: 特材质量参数
 * @Author: wangwangwang
 * @Date: 2020-09-21 14:09:06
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-29 15:04:14
-->
<template>
  <div class="pages_content table">
    <el-container>
      <el-header>
        <breaDcrumb />
      </el-header>
      <el-main>
        <div class="tabtop">
          <div v-for="(item, index) in contractTypelist" :key="index" @click="choose(item.id)">
            <div :class="currenindex == index ? 'active' : 'text'">{{ item.value }}</div>
            <div v-if="currenindex !== index && currenindex !== index + 1 && index !== 2" class="hr"></div>
          </div>
        </div>
        <!-- 质量参数 -->
        <div v-if="currenindex == 0">
          <div class="toptop">
            <div>
              <span>
                <span style="margin-right: 24px;">公司</span>
                <el-select ref="select" v-model="companyId" placeholder="请选择" @change="$nextTick(()=>{companyName = $refs.select.selectedLabel}), initQualityType()">
                  <el-option v-for="(item, index) in companylist" :key="index" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </span>
            </div>
          </div>
          <div class="info" style="display: flex;">
            <div class="left">
              <!-- 左侧导航 -->
              <div class="nav">
                <template v-for="(item, index) in leftList">
                  <div :key="index" :style="'width:' + 100 / leftList.length + '%'" :class="item.value == showleftIndex ? 'left-active' : ''" @click="change('leftIndex','showleftIndex',item.value)">{{ item.text }}</div>
                </template>
              </div>
              <!-- 左侧导航下方数据 -->
              <div class="radio leftitem">
                <el-radio-group v-model="showleftitemId" @change="change('leftitemId','showleftitemId',showleftitemId)">
                  <template v-for="(item, index) in leftitemList">
                    <div :key="index" class="radio-bg">
                      <el-radio :label="item.id">{{ item.name }}-{{item.type}}</el-radio>
                    </div>
                  </template>
                </el-radio-group>
              </div>
            </div>
            <div class="center"></div>
            <div class="right">
              <div class="nav">
                <template v-for="(item, index) in categoryList">
                  <div v-if="showleftIndex==1&&item.id<3" :key="index" :style="'width:' + 100 / 2 + '%'" :class="item.id == rightIndex && categoryList.length > 1 ? 'left-active' : ''" @click="change('rightIndex','showrightIndex',item.id)">{{ item.name }}</div>
                  <div v-if="showleftIndex==2&&item.id>2" :key="index" :style="'width:' + 100 / 2 + '%'" :class="item.id == rightIndex && categoryList.length > 1 ? 'left-active' : ''" @click="change('rightIndex','showrightIndex',item.id)">{{ item.name }}</div>
                </template>
              </div>
              <div style="padding: 20px 0 0 20px;">
                <el-button v-if="tablenav.length!==0&&ButtonList.findIndex(res=>(res.buttonValue=='BAOCUN'))!==-1" size="mini" class="bottom_all" style="margin-left: 0;" @click="addnbd()">保存</el-button>
              </div>
              <div style="padding: 20px;height: calc(100% - 110px);">
                <el-table v-loading="loading" :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="rightitemList" tooltip-effect="dark" height="100%">
                  <template v-for="(item, index) in tablenav">
                    <el-table-column :key="index" :label="item.name" align="center" :width="index == 0 ? '120px' : 'auto'">
                      <template slot-scope="scope">
                        <span v-if="index == 0">{{ scope.row[index] }}</span>
                        <div v-if="index !== 0 && scope.row[index]">
                          <el-select v-if="scope.row[index].type == 1" v-model="scope.row[index].content" placeholder="请选择">
                            <el-option v-for="(item, index) in JSON.parse(scope.row[index].symbol)" :key="index" :label="item.name" :value="item.name"></el-option>
                          </el-select>
                          <el-input v-if="scope.row[index].type == 2" v-model="scope.row[index].content" placeholder="请输入" clearable></el-input>
                          <span v-if="scope.row[index].type == 3">
                            <span>{{ scope.row[index].symbol }}</span>
                            <span v-if="scope.row[index].symbol.length==1">
                              <el-input v-model="scope.row[index].content" type="Number" style="width: 100%;" placeholder="请输入数字" clearable></el-input>
                            </span>
                            <span v-else>
                              <el-input v-model="scope.row[index].content" style="width: 100%;" placeholder="请输入两个数据并用逗号隔开" clearable></el-input>
                            </span>
                          </span>
                        </div>
                      </template>
                    </el-table-column>
                  </template>
                  <template v-if="signData">
                    <el-table-column label="下限值" align="center" width="auto">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row[1].lowerLimitValue" type="Number" placeholder="请输入" clearable></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column label="上限值" align="center" width="auto">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row[1].upperLimitValue" type="Number" placeholder="请输入" clearable></el-input>
                      </template>
                    </el-table-column>
                  </template>

                </el-table>
              </div>
            </div>
          </div>
        </div>
        <!-- 参数设置 -->
        <set v-if="currenindex == 1"></set>
        <!--物料绑定检测 -->
        <binding v-if="currenindex == 2"></binding>
        <!--检测频率设置 -->
        <!-- <frequency v-if="currenindex == 3"></frequency> -->
      </el-main>
    </el-container>
  </div>
</template>
<script src="./js/quality.js"></script>
<style lang="scss" src="./css/quality.scss" scoped></style>
